<template id="temp">
  <div>
    <div class="header">
      <div class="top">
        <div class="box1">
          <div class="box1Left">
            <nut-icon @click="back" name="left"></nut-icon>
          </div>
          <div class="box1Right">订单详情</div>
        </div>
        <div class="zw"></div>
        <div class="box2">
          <div class="box2Left" style="font-size: 30px">
            <van-icon style="margin-top: 12px" name="passed" />
          </div>
          <div class="box2Right">
            <h2>出票成功</h2>
            <p style="font-size: 10px">
              请您手持购票证件在车站或代售点取票后按时乘车
            </p>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="one">
          <!-- 号码 -->
          <div class="onrbox">
            <span>取票号:123123123</span>
          </div>
          <!-- 日期 -->
          <div class="onrbox">
            <div class="left">
              <span>03月15日周五</span>
            </div>
            <div class="onecount"></div>
            <div class="right">
              <span>03月15日周五</span>
            </div>
          </div>
          <!-- 时间 -->
          <div class="onrbox">
            <div class="oneleft">
              <h3>
                {{
                  particulars.ticketDate.substring(
                    17,
                    particulars.ticketDate.indexOf(" ")
                  )
                }}
              </h3>
            </div>
            <div class="onecount">
              <span>-经停信息-</span>
            </div>
            <div class="oneright">
              <h3>
                {{ particulars.ticketDate.substring(30) }}
              </h3>
            </div>
          </div>
          <div class="onrbox">
            <div class="oneleft">
              <span
                >{{
                  particulars.trainName.substring(
                    0,
                    particulars.trainName.indexOf("-")
                  )
                }}<nut-icon name="locationg3"></nut-icon
              ></span>
            </div>
            <div class="onecount">
              <span>{{
                particulars.trainName
                  .split("")
                  .reverse()
                  .join(" ")
                  .substring(0, particulars.trainName.indexOf(" "))
                  .split("")
                  .reverse()
                  .join(" ")
              }}</span>
            </div>
            <div class="oneright">
              <span
                ><nut-icon name="locationg3"></nut-icon
                >{{
                  particulars.trainName.substring(
                    4,
                    particulars.trainName.indexOf(" ")
                  )
                }}</span
              >
            </div>
          </div>
          <div class="hui">
            <div class="zw"></div>
            <div class="huoone">
              <div class="huileft">
                {{ particulars.booker }}
              </div>
              <div class="count"></div>
              <div class="huiright">
                <span>一等座</span>￥{{ particulars.priceMsg }}
              </div>
            </div>
            <div class="huoone">
              <div class="huileft">
                <span>410323**********22</span>
              </div>
              <div class="count"></div>
              <div class="huiright">
                <span>靠窗</span>&emsp;{{ particulars.carriag }}车厢{{
                  particulars.seatNumber
                }}
              </div>
            </div>
            <div class="huithere" style="color: green">
              {{
                particulars.status == 1
                  ? "已完成"
                  : particulars.status == 3
                  ? "已退款"
                  : particulars.status == 4
                  ? "已取消"
                  : "待支付"
              }}
            </div>
          </div>
          <div class="fot">
            <ul>
              <li>
                <div class="lileft">订单号</div>
                <div class="licount"></div>
                <div class="liright">76574574456465465</div>
              </li>
              <hr />
              <li>
                <div class="lileft">通知手机</div>
                <div class="licount"></div>
                <div class="liright">15738759163</div>
              </li>
            </ul>
            <ul>
              <li>
                <div class="lileft">成人票</div>
                <div class="licount"></div>
                <div class="liright">￥{{ particulars.priceMsg }}x2</div>
              </li>
              <hr />
              <li>
                <div class="lileft">订单总计</div>
                <div class="licount"></div>
                <div class="liright">￥{{ particulars.priceMsg * 2 }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      particulars: JSON.parse(localStorage.getItem("particulars")),
    });
    // 返回上一页
    function back() {
      history.go(-1);
    }
    return {
      ...toRefs(state),
      back,
    };
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 250px;
  position: relative;
  background: #1ba9ba;
  border-radius: 0px 0px 70px 70px;
}
.top {
  width: 100%;
  height: 160px;

  .box1 {
    display: flex;
    color: white;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    .box1Left {
      margin-left: 2%;
    }
    .box1Right {
      flex: 1;
      text-align: center;
    }
  }
  .zw {
    height: 60px;
  }
  .box2 {
    display: flex;
    color: white;
    .box2Left {
      margin-left: 5%;
    }
    .box2Right {
      flex: 1;
      margin-left: 3%;
    }
  }
}
.bottom {
  width: 94%;
  height: 260px;
  margin-left: 3%;
  background: white;
  position: absolute;
  border-radius: 10px;
  .one {
    .onrbox {
      width: 94%;
      margin-left: 3%;
      display: flex;
      margin-top: 3%;
      .onecount {
        flex: 1;
        text-align: center;
      }
    }
  }
}
.hui {
  width: 94%;
  margin-left: 3%;
  height: 100px;
  background: #eee;
  margin-top: 3%;
  .zw {
    height: 4px;
  }
  .huoone {
    display: flex;
    margin-top: 3%;
    .huileft {
      margin-left: 2%;
    }
    .huiright {
      margin-right: 2%;
    }
    .count {
      flex: 1;
    }
  }
  .huithere {
    margin-left: 2%;
  }
}
.fot {
  margin-top: 7%;
  ul {
    background: white;
    margin-top: 2%;
    li {
      display: flex;
      height: 50px;
      line-height: 50px;
      .licount {
        flex: 1;
      }
      .lileft {
        margin-left: 2%;
      }
      .liright {
        margin-right: 2%;
      }
    }
  }
}
</style>